<template>
  <view class="email-auth-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <text class="nav-title">邮箱验证</text>
    </view>

    <!-- 表单区域 -->
    <view class="form-section">
      <view class="form-item">
        <text class="label">邮箱地址</text>
        <uni-easyinput
          v-model="form.email"
          type="text"
          placeholder="请输入邮箱地址"
          class="without-border"
        ></uni-easyinput>
      </view>

      <view class="form-item">
        <text class="label">验证码</text>
        <view class="code-input">
          <uni-easyinput
            v-model="form.code"
            type="number"
            placeholder="请输入验证码"
            class="without-border"
          ></uni-easyinput>
          <button
            class="code-btn"
            :disabled="countdown > 0"
            @click="sendCode"
          >{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}</button>
        </view>
      </view>
    </view>

    <!-- 提示信息 -->
    <view class="tips">
      <text>* 验证码将发送至您的邮箱</text>
      <text>* 请注意查收邮件</text>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn">
      <button type="primary" @click="handleSubmit">确认验证</button>
    </view>
  </view>
</template>

<script>
import api from '@/config/api'
import { mapUviewIconName } from '@/utils/icon-mapper.js'

export default {
  data() {
    return {
      form: {
        email: '',
        code: ''
      },
      countdown: 0
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    async sendCode() {
      if (!this.validateEmail()) return

      try {
        await api.auth.sendCode({
          email: this.form.email,
          type: 'auth'
        })
        
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })

        // 开始倒计时
        this.countdown = 60
        const timer = setInterval(() => {
          this.countdown--
          if (this.countdown <= 0) {
            clearInterval(timer)
          }
        }, 1000)
      } catch (error) {
        console.error('发送验证码失败:', error)
        uni.showToast({
          title: '发送失败',
          icon: 'error'
        })
      }
    },
    validateEmail() {
      if (!this.form.email) {
        uni.showToast({
          title: '请输入邮箱地址',
          icon: 'none'
        })
        return false
      }
      if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.form.email)) {
        uni.showToast({
          title: '请输入正确的邮箱地址',
          icon: 'none'
        })
        return false
      }
      return true
    },
    validateForm() {
      if (!this.validateEmail()) return false
      
      if (!this.form.code) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return false
      }
      if (!/^\d{6}$/.test(this.form.code)) {
        uni.showToast({
          title: '请输入6位验证码',
          icon: 'none'
        })
        return false
      }
      return true
    },
    async handleSubmit() {
      if (!this.validateForm()) return

      try {
        await api.auth.verifyEmail(this.form)
        uni.showToast({
          title: '验证成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        console.error('验证失败:', error)
        uni.showToast({
          title: '验证失败',
          icon: 'error'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.email-auth-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #ffffff;

  .nav-back {
    padding: 20rpx;
    margin-left: -20rpx;
  }

  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    color: #333;
    margin-right: 44rpx;
  }
}

.form-section {
  margin-top: 20rpx;
  background-color: #ffffff;
  padding: 0 30rpx;
  border-radius: 12rpx;

  .form-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .label {
      width: 140rpx;
      font-size: 28rpx;
      color: #333;
    }

    .code-input {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 20rpx;

      .uni-easyinput {
        flex: 1;
      }
    }
  }
}

.tips {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;

  text {
    font-size: 24rpx;
    color: #999;
  }
}

.submit-btn {
  margin-top: 40rpx;
  padding: 0 20rpx;
}

.code-btn {
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  color: #ff5500;
  border: 1px solid #ff5500;
  background-color: transparent;
  border-radius: 4rpx;
  padding: 0 20rpx;
  
  &[disabled] {
    opacity: 0.5;
    color: #999;
    border-color: #ddd;
  }
}
</style> 